<template>
<div>
  <div class="coupon_wrp" :class="{
      'coupon_yellow':item.type=='cash',
      'coupon_green':item.type=='rebate',
      'coupon_blue':item.type=='voucher',
      'coupon_orange':item.type=='present',
      'coupon_purple':item.type=='ticket'
  }" v-if="type=='big' ">
      <div class="white_color denomination_title sm_font" :class="{
        'coupon_color_y':item.type=='cash',
        'coupon_color_g':item.type=='rebate',
        'coupon_color_b':item.type=='voucher',
        'coupon_color_o':item.type=='present',
        'coupon_color_p':item.type=='ticket'}">Coupon</div>
      <div class="coupon_denomination white_color lg_m_font">
        <span v-if="item.type!=='rebate'" style="font-size: 1.7rem;">{{item.denomination}}</span>
        <span v-if="item.type ==='rebate'" style="font-size: 1.7rem;">{{item.denomination| numRebateF}}</span>
      </div>
      <div class="coupon_type_name sm_font white_color">
        {{item.type | couponTp}}
      </div>
  </div>
  <div class="couponDiv2" v-if="type=='small' " :class="{'coupon_yellow':item.type=='cash','coupon_green':item.type=='rebate','coupon_blue':item.type=='voucher','coupon_orange':item.type=='present','coupon_purple':item.type=='ticket'}">
    <div class="_num" :class="{'coupon_color_y':item.type=='cash','coupon_color_g':item.type=='rebate','coupon_color_b':item.type=='voucher','coupon_color_o':item.type=='present','coupon_color_p':item.type=='ticket'}">Coupon</div>
    <div class="_num_price">
      <coupon-num :num="item.denomination" :type="item.type"></coupon-num>
    </div>
    <div class="coupon_type">{{item.type | couponTp}}</div>
  </div>
</div>
</template>

<script>
import couponNum from './couponNum.vue'
export default {
  components: {
    couponNum
  },
  props: {
    item: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'big'
    }
  },
  watch: {
    item() {
      if (this.item.couponType && !this.item.type) {
        this.item.type = this.item.couponType
      }
    }
  },
  filters: {
    numRebateF:function(value){
        let _price = value.toString();
        if(_price >= 10){
            var str = _price.slice(0,1);
        }else{
            var str ='0';
        }
        if(_price.slice(1,2)){
            if(_price.slice(1,2)==0){
                return value/10+'.'+0;
            }
        }
        return value/10;
    }
  }
}
</script>

<style lang="css" scoped>
.coupon_wrp {
  padding: 0.2rem 0 0.4rem;
  position: relative;
  /* padding-bottom: 0.5rem; */
  /* clip-path: polygon(100% 0, 100% 100%, 90% 100%, 90% 94%, 90% 94%, 90% 100%, 90% 94%, 85% 94%, 85% 100%, 75% 100%, 75% 94%, 70% 94%, 70% 100%, 60% 100%, 60% 94%, 55% 94%, 55% 100%, 45% 100%, 45% 94%, 40% 94%, 40% 100%, 30% 100%, 30% 94%, 25% 94%, 25% 100%, 15% 100%, 15% 94%, 10% 94%, 10% 100%, 0 100%, 0 0); */
}
.coupon_wrp::after {
  position: absolute;
  bottom: 0;
  display: block;
  content: "";
  width: 100%;
  height: 0.3rem;
  background-color: #FFF;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.coupon_yellow::after {
  background-image: url('../../images/denomination_cash.png');
}
.coupon_green::after {
  background-image: url('../../images/denomination_rebate.png');
}
.coupon_blue::after {
  background-image: url('../../images/denomination_voucher.png');
}
.coupon_orange::after {
  background-image: url('../../images/denomination_present.png');
}
.coupon_purple::after {
  background-image: url('../../images/denomination_ticket.png');
}
.coupon_type_name,.coupon_denomination, .denomination_title {
  text-align: center;
}

</style>
